<template>
  <a-modal
    title="资源素材库"
    ok-text="确认"
    cancel-text="取消"
    centered
    :closable="false"
    :open="open"
    :width="800"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-row>
      <a-tabs v-model:activeKey="tabKey" @change="onChange">
        <a-tab-pane key="1" tab="课件">
          <UploadCoursewareSub
            label="课件"
            :defaultCheckedList="internalDefaultKeys"
            :open="open"
            @selected="handleSelected"
          />
        </a-tab-pane>
      </a-tabs>
    </a-row>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch, computed } from "vue";
import UploadCoursewareSub from "./upload-courseware-sub.vue";

interface PropsInterface {
  defaultKeys: any[];
  open: boolean;
  onSelected: (arr: any[], videos: any[]) => void;
  onCancel: () => void;
}

const props = defineProps<PropsInterface>();

const tabKey = ref("1");
const selectKeys = ref<number[]>([]);
const selectVideos = ref<any[]>([]);

// 初始化默认选中状态
watch(() => props.open, (newVal) => {
  if (newVal) {
    selectKeys.value = [...props.defaultKeys];
  } else {
    selectKeys.value = [];
    selectVideos.value = [];
  }
}, { immediate: true });

const internalDefaultKeys = computed(() => selectKeys.value);

const handleSelected = (arr: any[], videos: any[]) => {
  selectKeys.value = arr;
  selectVideos.value = videos;
};

const onChange = (key: string) => {
  tabKey.value = key;
};

const handleOk = () => {
  props.onSelected(selectKeys.value, selectVideos.value);
  selectKeys.value = [];
  selectVideos.value = [];
};

const handleCancel = () => {
  selectKeys.value = [];
  selectVideos.value = [];
  props.onCancel();
};
</script>